<template>
	<view class="indexs">
		 <u-navbar :placeholder="true"   title="开盲盒" :autoBack="false" :safeAreaInsetTop="true">
			 
		 </u-navbar>
	     <view class="indexs-headr">
	         <view class="indexs-headr-img" v-if="boxInfo.thumb">
	         	<image :src="boxInfo.thumb" mode="widthFix"></image>
	         </view>
			<view class="indexs-headr-bootom">
				<view class="indexs-headr-bootom-name" v-if="boxInfo.title">
					<text>{{boxInfo.title}}</text>
				</view>
				<!-- <view class="indexs-headr-bootom-allbtn">
					<text>全部开启</text>
				</view> -->
				<view class="indexs-headr-bootom-title">
					<text>可开启盲盒<text style="color: #000;"> {{boxInfo.blind_box_count}} </text>个</text>，<text>寄售中盲盒<text style="color: #000;"> {{boxInfo.blind_box_resale_count}} </text>个</text>
				</view>
				<view class="indexs-headr-bootom-btn">
					<view class="allopen" @click="openBox">
						<text>逐个开启</text>
					</view>
					<view class="Consignment" @click="toPage">
						<text>立即寄售</text>
					</view>
				</view>
			</view>
	     </view>
		
		 <u-popup :show="show" mode="bottom"  @close="show=false" @open="open">
		        <resalePopup @sureConsignment="sureConsignment" :resaleData="resaleData"></resalePopup>
		 	</u-popup>
			<u-popup :show="shows" :round="8" @close="shows=false" mode="center" @open="open">
			            <view class="transaction">
									 <view class="transaction-text">
									 	<text>请输入交易密码</text>
									 </view>
									 <view class="transaction-input">
									 	<u-code-input :focus="true" @finish="finish"  size="44" dot v-model="value5" mode="box" :space="0" :maxlength="6" hairline></u-code-input>
									 </view>
			              <!--  <view class="transaction-tips">
			                	<text>输入完后提示：转售成功</text>
			                </view> -->
			            </view>
			</u-popup>
	    </view>
</template>

<script>
	import resalePopup from '@/components/resalePopup.vue'
	export default{
		components:{
			resalePopup
		},
		data(){
			return{
				boxInfo:{},
				show:false,
				resaleData:{},
				shows:false,
				value5:'',
				fee:'',
				jishouPrice:'',
				gooldsTrue:[],
				gooldsFales:[],
				id:null
			}
		},
		onLoad(v) {
			this.id = v.id
			this.blindBox() 
			this.send()
			this.order_id = v.order_id
			// this.initlist()
		},
	    methods:{
			leftClick(){
				
				uni.switchTab({
					url:'/pages/Mine/index'
				})
			},
			// async initList(){
			// 	let res = await this.$http({
			// 		  url:this.$api.myBlindBoxItems,
			// 		  method:'get',
			// 		  hideLoading: true,
			// 	      data:{
			// 			 blind_box_id:this.boxInfo.blind_box_id,
			// 		  }
			// 	})  
			// 	if(res.code===200){
			// 	 this.gooldsTrue = res.data.filter(item=>item.ordertype===1)
			// 	 this.gooldsFales = res.data.filter(item=>item.ordertype===0)
			// 	}
			// },
			sureConsignment(v){
				this.show = false
				this.shows = true
				this.jishouPrice = v
			},
			
		async finish(){
					if(this.boxInfo.blind_box_count){
						  this.order_id = this.boxInfo.order_id
						  this.jishouBox()
						  this.value5 = ''
			          }else{
						  this.$u.toast('没有可寄售盲盒！')
					  }
			},
			async jishouBox(){
				let data= await this.$http({
					url: this.$api.blindBoxChange,
					method: 'post',
					needToken: true,
					data: {
					order_id: this.order_id,
					price:this.jishouPrice,
					password:this.value5,
					}
				})
				    if(data.code===200){
						this.$u.toast(data.msg)
						this.blindBox()
					}else{
						this.$u.toast(data.msg)
					}
				  // this.initList()
				  this.shows = false
			},
			async send(){
			// if (this.detail.is_integral > 0) return
					let data= await this.$http({
							url: this.$api.getConfigDetail,
							method: 'get',
							hideLoading: true,
							needToken: true,
							data: {name: 'platform_fee'}
						})
						if (data.code == 200) {	
							this.fee = data.data[0].value
							// this.resaleData.fee = data.data[0].value
						}
			},
		async blindBox(){
				let res = await this.$http({
					  url:this.$api.myBlindBoxDetail,
					  method:'get',
					  hideLoading: true,
				      data:{
						 blind_box_id:this.id
					  }
				})
				if(res.code==200){
					this.boxInfo = res.data
				}
			},
		 async openBox(){
			 // console.log()
			 if(this.boxInfo.blind_box_count>0){
				 this.openBoxItem()
			 }else{
				this.$u.toast('暂无盲盒可以开启！') 
			 }
			 // let res = await this.$http({
			 // 	  url:this.$api.myBlindBoxItems,
			 // 	  method:'get',
			 // 	  hideLoading: true,
			 //       data:{
			 // 		 blind_box_id:this.boxInfo.blind_box_id,
			 // 	  }
			 // })  
			 // if(res.code===200){
				//  this.openBoxItem()
			 // }else{
				//  this.$u.toast(res.msg)
			 // }
		 },
		 async openBoxItem(){
			 let res = await this.$http({
			 	  url:this.$api.openMyBlindBox,
			 	  method:'POST',
			 	  hideLoading: true,
			       data:{
			 		 blind_box_id:this.boxInfo.blind_box_id,
					 all:0
			 	  }
			 }) 
			 if(res.code===200){
				 this.blindBox()
				 uni.showToast({
				 	title: '开启成功！',
				 	duration: 2000,
				 	icon: 'none'
				 });
				 uni.navigateTo({
				 	url:'/pages/airdrop/airdetails?id='+this.boxInfo.blind_box_id
				 })
			 }else{
				 uni.showToast({
				 	title: res.msg,
				 	duration: 2000,
				 	icon: 'none'
				 });
			 }
			 
		 },
		 toPage(){
			 if(this.boxInfo.blind_box_count<1){
				 uni.showToast({
				 	title: '暂无可寄售盲盒',
				 	duration: 2000,
				 	icon: 'none'
				 });
				 return
			 }
			 this.resaleData={
				 title:this.boxInfo.title,
				 thumb:this.boxInfo.thumb,
				 fee:this.fee
			 }
			 this.show = true
			 // uni.navigateTo({
			 // 	url:'/subpage/Product/boxDetails?id='+this.boxInfo.special_id
			 // })
		 }
		}
	}
</script>

<style lang="scss" scoped>
	.transaction{
		width: calc(100vw - 60rpx);
		height: 358rpx;
		&-text{
			margin-top: 60rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #292A40;
		}
		&-input{
			display: flex;
			justify-content: center;
		    margin-top: 48rpx;
		}
		&-tips{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #777E90;
			margin-left: 100rpx;
			margin-top: 36rpx;
		}
	}
	.indexs{
		&-headr{
			width: 100vw;
			height: 363rpx;
			background-image: url(@/static/images/info/manhehearde.png);
		    background-size: 100% 100%;
				
			// display: flex;
			// // align-items: center;
			// justify-content: center;
			padding-top: 92rpx;
			&-img{
				background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.48) 6%, rgba(255,255,255,0.58) 15%, rgba(255,255,255,0.21) 88%, rgba(255,255,255,0.68) 100%);
				box-shadow: inset 0px 3px 6px 0px rgba(255,255,255,0.5), inset 0px -3px 6px 0px rgba(255,255,255,0.5);
				border-radius: 4rpx;
				border: 1px solid;
				border-image: linear-gradient(180deg, rgba(190, 255, 245, 1), rgba(109, 147, 255, 1)) 1 1;
				backdrop-filter: blur(16px);
				padding:30rpx 0 ;
				width:calc(100vw - 240rpx);
				display: flex;
				justify-content: center;
				position: relative;
				margin: auto;
				z-index:9999;
			    overflow: hidden;
				image{
					width: calc(100vw - 300rpx);
				}
			}
			&-bootom{
				margin-top: -30rpx;
				position: absolute;
				z-index: 1;
				width: 100vw;
				height: calc(100vh - 836rpx);
				background-image: url(@/static/images/info/bianzushiba.png);
				background-size: 100% 100%;
				image{
					width: 100%;
					height: 100%;
				}
				&-name{
					text-align: center;
					font-size: 40rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #292A40;
					margin-top: 190rpx;
				}
				&-allbtn{
					margin: auto;
					width: 400rpx;
					height: 88rpx;
					background: #FFFFFF;
					border-radius: 44rpx;
					border: 1px solid #979797;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #16172F;
					text-align: center;
					line-height: 88rpx;
					margin-top: 40rpx;
				}
				&-title{
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #8C93AA;
					margin-top: 10rpx;
				}
				&-btn{
					display: flex;
					margin-top: 100rpx;
					.allopen{
						margin-left: 40rpx;
						width: calc(50vw - 40rpx - 20rpx);
						height: 88rpx;
						background: #FFFFFF;
						border-radius: 44rpx;
						border: 1px solid #979797;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #16172F;
						text-align: center;
						line-height: 88rpx;
					}
					.Consignment{
						margin-left: 30rpx;
						width: calc(50vw - 40rpx - 20rpx);
						height: 88rpx;
						background: #FFFFFF;
						border-radius: 44rpx;
						border: 1px solid #979797;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #16172F;
						text-align: center;
						line-height: 88rpx;
					}
				}
			}
		}
	
	}
</style>